<template>
	<view class="box" :style="theme">
		<text class="box_text">请认真核对信息</text>
		<!-- 票信息 -->
		<view class="box_item">
			<view class="box_item_title">
				<image src="/static/icon/detail_ic_ticket.png"></image>
				<text>{{desc.ticketName}}</text>
			</view>
			<view class="box_item_content">
				<view class="box_item_content_a">场馆：<text class="box_item_content_h">{{desc.venueName}}</text></view>
				<view class="box_item_content_a">适用项目：<text class="box_item_content_h">{{desc.applyName}}</text></view>
				<view class="box_item_content_a">使用时间：<text class="box_item_content_h">仅限{{date}}，{{desc.startDate}}{{desc.startDate&&desc.endDate?'~' + desc.endDate :desc.endDate?desc.endDate:''}}</text></view>
				<view v-if="desc.duration" class="box_item_content_a">使用时长：<text class="box_item_content_h">{{desc.duration}}小时</text></view>
				<view class="box_item_content_a">门票价格：<text class="box_item_content_red">{{desc.price}}元</text></view>
				<view v-if="desc.deposit" class="box_item_content_a">门票押金：<text
						class="box_item_content_red">{{desc.deposit}}元</text></view>
				<view v-if="desc.charge=='1'" class="box_item_content_a"><text
						class="box_item_content_red">免费时长{{desc.freeTime}}分钟，超时单价{{desc.unitPrice}}元/{{desc.units}}分钟，超时上限{{desc.timeOutMax}}元</text>
				</view>
				<view class="box_item_x"></view>
			</view>
			<view class="box_item_num">
				<text>购买数量：</text>
				<u-number-box v-model="num" button-size="26" @change="onChange"></u-number-box>
			</view>
		</view>
		<!-- 须知 -->
		<view v-if="desc.purchaseNotes" class="box_xz">
			<text class="box_xz_title">购买须知</text>
			<text class="box_xz_wz">{{desc.purchaseNotes}}</text>
		</view>
		<view v-if="desc.ticketDetail" class="box_xz">
			<text class="box_xz_title">门票详情</text>
			<text class="box_xz_wz">{{desc.ticketDetail}}</text>
		</view>
		<!-- 展位 -->
		<view class="box_x"></view>
		<!-- 底部充值 -->
		<view class="box_footer">
			<view class="flex mb3">
				<view class="checkboxBox" :class="isActive?'on':''" @click="isTy">
					<u-icon v-if="isActive" name="checkmark-circle-fill" size="40rpx"></u-icon>
				</view>
				<view>点击即视为同意<text class="red" @click="open">《购票协议》</text></view>
			</view>
			<view class="box_footer_btn" @click="$noMultipleClicks(submit)">
				<text>提交订单</text>
			</view>
		</view>
		<u-popup :show="show" @close="onClickHide" mode="center" round="20rpx">
			<view class="agreement">
				<view class="agreement_bt">购票协议</view>
				<scroll-view class="swiper-scroll" scroll-y="true">
					<u-parse :content="xy"></u-parse>
				</scroll-view>
				<view class="agreement_foot flex">
					<view style="opacity: 1" @click='onClickHide'>确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				noClick: true,
				id: '',
				num: 1,
				desc: {},
				isActive: false,
				xy: '',
				show: false,
				date: '',
			}
		},
		onLoad(ops) {
			this.id = ops.id
			this.date = ops.date || this.$app.firstQueryTime().slice(0, 10)
			this.getDetail()
			this.getYx()
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			jump3(url, params, a) {
				this.$app.jump3(url, params, a);
			},
			isTy() {
				this.isActive = !this.isActive
			},
			getYx() {
				this.$app.ajax({
					data: {
						param: {
							type: '15',
							code: 'AGREEMENT_TICKET'
						}
					},
					api: this.$api.paymentConfiguration()
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.xy = res.recordList[0].value
					}
				}).catch(() => {})
			},
			open() {
				this.show = true
			},
			onClickHide() {
				this.show = false
			},
			submit() {
				if (!this.isActive) {
					return this.$app.showToast('请先勾选购票协议')
				}

				this.$app.ajax({
					api: this.$api.placeOrder(),
					data: {
						param: {
							id: this.id,
							ticketNum: this.num,
							buyDate: this.date,
							venueId: this.venueId
						}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.jump3('/pages/order/pay?type=3&orderId=', res.record.orderId)
					}
				}).catch(() => {})
			},
			getDetail() {
				this.$app.ajax({
					api: this.$api.getTicketDetails(),
					data: {
						userId: this.userInfo.id,
						param: {
							id: this.id
						}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.desc = res.record
					} else {
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 500)
					}
				}).catch(() => {})
			}

		}

	}
</script>


<style scoped lang="scss">
	.box {
		padding: 30rpx;
		box-sizing: border-box;
	}

	.box_text {
		font-size: 26rpx;
		font-weight: 400;
		color: #666666;
	}

	.box_item {
		background: #ffffff;
		border-radius: 16rpx;
		overflow: hidden;
		margin-top: 30rpx;
	}

	.box_item_title {
		width: 100%;
		display: flex;
		align-items: center;
		height: 80rpx;
		background: $color;
	}

	.box_item_title image {
		width: 28rpx;
		height: 28rpx;
		margin-left: 30rpx;
		flex-shrink: 0;
	}

	.box_item_title text {
		width: 600rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #FFFFFF;
		margin-left: 12rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.box_item_content {
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.box_item_x {
		border-bottom: 1px solid #E5E5E5;
		margin-top: 30rpx;
	}

	.box_item_content .box_item_content_a:nth-child(1) {
		margin-top: 0 !important;
	}

	.box_item_content_a {
		margin-top: 32rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #666666;
	}

	.box_item_content_h {
		font-size: 28rpx;
		font-weight: 400;
		color: #222222;
	}

	.box_item_content_red {
		font-size: 28rpx;
		font-weight: 500;
		color: $red;
	}

	.box_item_num {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 0 30rpx 30rpx 30rpx;
		box-sizing: border-box;
	}

	.box_item_num text {
		font-size: 26rpx;
		font-weight: 400;
		color: #333333;
	}

	.box_xz {
		padding: 30rpx;
		background: #ffffff;
		margin-top: 30rpx;
		display: flex;
		flex-direction: column;
	}

	.box_xz_title {
		font-size: 32rpx;
		font-weight: 600;
		color: #222222;
	}

	.box_xz_wz {
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		margin-top: 28rpx;
	}

	.box_x {
		height: 230rpx;
	}

	.box_footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 230rpx;
		background: #ffffff;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.red {
		color: $color !important;
	}

	.box_footer_btn {
		height: 100rpx;
		background: $color;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.box_footer_btn text {
		font-size: 30rpx;
		font-weight: 500;
		color: #FFFFFF;
	}
</style>
